<template>
    <div class="l-header">
        <el-button v-if="showCreateBtn" type="primary" size="small" @click="$emit('create')">新增</el-button>
        <el-popconfirm v-if="showDeleteBtn" title="是否要删除批量删除选中？" confirm-button-text="是" cancel-button-text="否" @confirm="$emit('delete')">
            <template #reference>
                <el-button type="danger" size="small">批量删除</el-button>
            </template>
        </el-popconfirm>
        <slot></slot>
        <div class="header-right">
            <el-tooltip v-if="showRefreshBtn" effect="dark" content="刷新数据" placement="top">
                <el-button link type="primary" size="small" @click="$emit('refresh')">
                    <el-icon size="16"><Refresh /></el-icon>
                </el-button>
            </el-tooltip>
            <el-tooltip v-if="showDownloadBtn" effect="dark" content="导出数据" placement="top">
                <el-button link type="primary" size="small" @click="$emit('download')">
                    <el-icon size="16"><Download /></el-icon>
                </el-button>
            </el-tooltip>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { hasPermission } from "~/directive/permission.js"
const props = defineProps({
    show: {
        type: String,
        default: ""
    },
    permissions: {
        type: Object,
        default() {
            return {
                create: "",
                delete: "",
                refresh: "",
                download: ""
            }
        }
    }
})

const emit = defineEmits(["create", "delete", "refresh", "download"])

const showCreateBtn = isShow("create")
const showDeleteBtn = isShow("delete")
const showRefreshBtn = isShow("refresh")
const showDownloadBtn = isShow("download")

function isShow(type) {
    let p = props.permissions[type]
    if(p) return hasPermission([p])
    const show = props.show.split(",")
    return show.includes(type)
}
</script>
<style lang="scss" scoped>
.l-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .header-right {
        margin-left: auto;
    }
}
</style>